{% extends "layout/base.html" %}
{% block title %} Accueil {% endblock %}

{% block content %}
    {% include 'layout/header.html' %}
    {% include 'layout/infosBox.html' %}
    <div id="admin" class="{{theme.color3}} tab-content content">
        <!-- Tabs -->
        <ul class="nav nav-tabs {{theme.color2}}" id="myTab">
            <li><a href="#adminSearch">Rechercher</a></li>
            <li><a class="active" href="#users">Users</a></li>
            <li><a href="#availabilities">Disponibilités</a></li>
            <li><a href="#times">Times</a></li>
            <li><a href="#statistiques">Statistiques</a></li>
        </ul>
        <div id="adminSearch" class="tab-pane">
            <form id="adminForm" method="get" action="./boutique.php" class="form-elem">
                <input id="adminRecherche" name="keyword" type="text" placeholder="Rechercher (aaaa-mm-dd ou Alain ou bricolage)" />
                <input id="adminSubmit" name="search" type="submit" value=""/>
                <div class="clr" ></div>
            </form>
        </div>  
    	<div id="users" class="results tab-pane">
        	{% if users %}
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Prénom</th>
                            <th>Nom</th>
                            <th>mail</th>
                            <th>date de naissance</th>
                            <th>droits</th>
                            <th>Bannir</th>
                        </tr>
                    </thead>
                    <tbody>
            			{% for user in users %}
            				<tr>
                                <td><a href="./profil.php?id={{user.id_user}}">{{user.firstname}}</a></td>
                                <td><a href="./profil.php?id={{user.id_user}}">{{user.lastname}}</a></td>
                                <td>{{user.mail}}</td>
                                <td>{{user.birthday}}</td>
                                <td>
                                    <form method="post" id="rightUser" action="admin.php" class="form-elem">
                                    <input type="hidden" name="id_user" value="{{user.id_user}}" />
                                    <select name="rights" class="selectpicker" onchange="form.submit()">
                                        {% for right in rights %}
                                            {% set selected = "" %}
                                            {% if user.rights == right %}
                                                {% set selected = "selected" %}
                                            {% endif %}
                                            <option {{selected}} value="{{right}}" >{{right}}</option>
                                        {% endfor %}
                                    </select>
                                    </form>
                                </td>
                                <td>
                                    {% if user.rights != 'ADMIN' %}
                                    <form method="post" id="banUser" action="admin.php" class="form-elem">
                                        <input type="hidden" name="id_user" value="{{user.id_user}}" />
                                        <input type="hidden" name="ban" value="{{user.ban}}" />
                                        {% if user.ban == 0 %}
                                            <input type="submit" name="banUser" value="" class="Bannir btnBan" />
                                        {% else %}
                                            <input type="submit" name="banUser" value="" class="Bannir btnDeban" />
                                        {% endif %}
                                    </form>
                                    {% endif %}
                                </td>
                            </tr>
            			{% endfor%}
                    </tbody>
                </table>
        	{% else %}
        		<p>Pas d'utilisateurs.</p>
        	{% endif %}
    	</div>
        <div id="availabilities" class="results tab-pane">
            {% if availabilities %}
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Prénom</th>
                            <th>Nom</th>
                            <th>date</th>
                            <th>durée</th>
                            <th>récurrence</th>
                            <th>Prix fixé (€)</th>
                            <th>Supprimer</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for availability in availabilities %}
                            <tr>
                                <td>{{availability.firstname}}</td>
                                <td>{{availability.lastname}}</td>
                                <td>{{availability.date_begin}}</td>
                                <td>{{availability.duration}}</td>
                                {% if availability.daily %}
                                    <td>quotienne</td>
                                {% elseif availability.weekly %}
                                    <td>hebdomadaire</td>
                                {% elseif availability.monthly %}
                                    <td>mensuelle</td>
                                {% elseif availability.yearly %}
                                    <td>annuelle</td>
                                {% else %}
                                    <td>ponctuelle</td>
                                {% endif %}
                                <td>{{availability.price}}</td>
                                <td>
                                    <form method="post" id="supprAvailability" action="admin.php" class="form-elem">
                                        <input type="hidden" name="id_availability" value="{{availability.id_availability}}" />
                                        <input type="submit" name="supprimerAvailability" value="" class="btnSuppr" />
                                    </form>
                                </td>
                            </tr>
                        {% endfor%}
                    </tbody>
                </table>
            {% else %}
                <p>Pas de disponibilités.</p>
            {% endif %}
        </div>
        <div id="times" class="results tab-pane">
            {% if times %}
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Prénom</th>
                            <th>Nom</th>
                            <th>mail</th>
                            <th>catégorie</th>
                            <th>date</th>
                            <th>durée</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for time in times %}
                            <tr>
                                <td>{{time.firstname}}</td>
                                <td>{{time.lastname}}</td>
                                <td>{{time.mail}}</td>
                                <td>{{time.name}}</td>
                                <td>{{time.date}}</td>
                                <td>{{time.duration}}</td>
                            </tr>
                        {% endfor%}
                    </tbody>
                </table>
            {% else %}
                <p>Pas de temps.</p>
            {% endif %}
        </div>
        <div id="statistiques" class="tab-pane" >
            <h3>Utilisateurs</h3>
            <div id="graphUsers" style="width:50%;"></div>
            <h3>Temps</h3>
            <div id="graphTimes" style="width:50%;"></div>
        </div>
        {% include 'layout/module.html' %}
    </div>
    {% include 'layout/footer.html' %}
    <script type="text/javascript">
        $(function () {
            $('#myTab a.active').tab('show');
        });
        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $('a[data-toggle="tab"]').on('shown', function (e) {
            e.target // activated tab
            e.relatedTarget // previous tab
        });
    </script>
    <script src="{{MEDIA_PATH}}js/highcharts.js"></script>
    <script charset="utf-8" type="text/javascript" >
        // Création des graphs.
        $(document).ready(function(){
            $(function(){ 
                $('#graphUsers').highcharts({
                    chart: {
                        type: 'bar',
                        // Explicitly tell the width and height of a chart
                        width: 480,
                        height: null,
                        borderRadius: 0,
                        backgroundColor: 'rgba(255, 255, 255, 0.6)'
                    },
                    title: {
                        text: 'Nombres d\'utilisateurs'
                    },
                    xAxis: {
                        title: {
                            text: 'Mois'
                        },
                        categories: ['{{countUser.0.month}}', '{{countUser.1.month}}', '{{countUser.2.month}}', '{{countUser.3.month}}', '{{countUser.4.month}}', '{{countUser.5.month}}', '{{countUser.6.month}}', '{{countUser.7.month}}', '{{countUser.8.month}}', '{{countUser.9.month}}', '{{countUser.10.month}}', '{{countUser.11.month}}']
                    },
                    yAxis: {
                        title: {
                            text: 'Nombres d\'utilisateurs'
                        }
                    },
                    series: [{
                        data: [{{countUser.0.count}}, {{countUser.1.count}}, {{countUser.2.count}}, {{countUser.3.count}}, {{countUser.4.count}}, {{countUser.5.count}}, {{countUser.6.count}}, {{countUser.7.count}}, {{countUser.8.count}}, {{countUser.9.count}}, {{countUser.10.count}}, {{countUser.11.count}}]
                    }]
                });
            });
            $(function() { 
                $('#graphTimes').highcharts({
                    chart: {
                        type: 'pie',
                        // Explicitly tell the width and height of a chart
                        width: 480,
                        height: null,
                        borderRadius: 0,
                        backgroundColor: 'rgba(255, 255, 255, 0.6)'
                    },
                    title: {
                        text: 'Utilisateur par temps'
                    },
                    series: [{
                        type: 'pie',
                        name: 'Catégories',
                        data: [
                            ['{{userPerCat.0.name}}', {{userPerCat.0.count}}],
                            ['{{userPerCat.1.name}}', {{userPerCat.1.count}}],
                            ['{{userPerCat.2.name}}', {{userPerCat.2.count}}],
                            ['{{userPerCat.3.name}}', {{userPerCat.3.count}}],
                            ['{{userPerCat.4.name}}', {{userPerCat.4.count}}],
                            ['{{userPerCat.5.name}}', {{userPerCat.5.count}}],
                            ['{{userPerCat.6.name}}', {{userPerCat.6.count}}],
                            ['{{userPerCat.7.name}}', {{userPerCat.7.count}}],
                            ['{{userPerCat.8.name}}', {{userPerCat.8.count}}],
                            ['{{userPerCat.9.name}}', {{userPerCat.9.count}}]
                        ]
                    }]
                });
            });
        });
    </script>
{% endblock %}